<template>
	<view class="loveAlbum">
		<template v-for="(love, index) of loveList">
			<view :key="index" class="little-heart" :style="love"></view>
		</template>

		<view class="heart" v-viewer="options">
			<view class="row" v-for="(list, i) of heartData" :key="i">
				<view class="col" :style="imgStyle" v-for="(item, j) of list" :key="j">
					<!-- uniapp使用img标签的情况下需要在路径加上./使用相对路径，否则图片会显示不出来 -->
					<img class="image" v-if="item" mode="aspectFill" :data-src="item.src" :src="item.thumbnail" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	created() {
		uni.getSystemInfo({
			success: res => {
				this.windowSize.width = res.windowWidth;
				this.windowSize.height = res.windowHeight;
				if (res.windowWidth >= res.windowHeight) {
					this.imgStyle.width = this.imgStyle.height = 100 / this.heartData.length + 'vh';
				} else {
					this.imgStyle.width = this.imgStyle.height = 100 / this.heartData[0].length + 'vw';
				}

				this.floatHearts(res.windowWidth);

				this.doHeart();
			}
		});
	},
	data() {
		return {
			options: {
				url: 'data-src'
			},
			windowSize: {
				width: 0,
				height: 0
			},
			imgStyle: {
				width: '',
				height: ''
			},
			loveList: [],
			heartData: [
				[0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0],
				[0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 0],
				[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
				[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
				[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
				[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
				[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
				[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
				[0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
				[0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0],
				[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0]
			]
		};
	},
	methods: {
		doHeart() {
			let num = 0;
			for (let i = 0; i < this.heartData.length; i++) {
				for (let j = 0; j < this.heartData[i].length; j++) {
					if (this.heartData[i][j] === 1) {
						this.heartData[i][j] = {
							src: './static/images/album/' + num + '.jpg',
							thumbnail: './static/images/thumbnail/' + num + '.jpg'
						}
						num++;
					}
				}
			}
		},
		// 随机创建漂浮爱心
		floatHearts(windowWidth) {
			let width = windowWidth;
			let count = parseInt((width / 50) * 5);
			for (let i = 0; i < count; i++) {
				let size = parseInt(this.getRandom(60, 120) / 10);
				this.loveList.push({
					height: size + 'px',
					width: size + 'px',
					top: this.getRandom(0, 98) + '%',
					left: this.getRandom(0, 98) + '%',
					'animation-delay': this.getRandom(0, 30) / 10 + 's'
				});
			}
		},
		getRandom(min, max) {
			min = parseInt(min);
			max = parseInt(max);
			return Math.floor(Math.random() * (max - min + 1)) + min;
		}
	}
};
</script>

<style lang="scss" scoped>
.loveAlbum {
	.little-heart {
		position: fixed;
		opacity: 0;
		background: #cc2a5d;
		transform: rotate(45deg);
		animation: little-heart 3s ease-in infinite;

		@keyframes little-heart {
			0% {
				opacity: 0;
				transform: translateY(0%) rotate(45deg);
			}
			20% {
				opacity: 0.8;
				transform: translateY(-20%) rotate(45deg);
			}
			100% {
				opacity: 0;
				transform: translateY(-1000%) rotate(45deg);
			}
		}

		&:before,
		&:after {
			content: '';
			width: 100%;
			height: 100%;
			background-color: #cc2a5d;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 50%;
		}

		&:before {
			transform: translateX(-50%);
		}

		&:after {
			transform: translateY(-50%);
		}
	}

	.heart {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		width: 100vw;

		.row {
			display: flex;

			.col {
				.image {
					cursor: pointer;
					object-fit: cover;
					box-sizing: border-box;
					padding: 1px;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>
